<html>
  <script>
    var socket = new WebSocket("ws://127.0.0.1:3000");
    function sendMsg() {
      console.log("send");
      socket.send(
        JSON.stringify({
          handle: "测试"
        })
      );
    }
    socket.onmessage = function (event) {
      console.log(event);
    };
  </script>
  <body>
    Local: <br />
    <video id="localVideo" autoplay></video><br />
    Remote: <br />
    <video id="remoteVideo" autoplay></video>

    <script>
      // http://127.0.0.1:3000
      // 仅仅用于控制哪一端的浏览器发起offer，#号后面有值的一方发起
      var isCaller = window.location.href.split("#")[1];

      // 与信令服务器的WebSocket连接
      var socket = new WebSocket("ws://127.0.0.1:3000");

      // stun和turn服务器
      var iceServer = {
        iceServers: [
          {
            url: "stun:stun.l.google.com:19302"
          },
          {
            url: "turn:numb.viagenie.ca",
            username: "webrtc@live.com",
            credential: "muazkh"
          }
        ]
      };

      // 创建PeerConnection实例 (参数为null则没有iceserver，即使没有stunserver和turnserver，仍可在局域网下通讯)
      var pc = new webkitRTCPeerConnection(iceServer);

      // 发送ICE候选到其他客户端
      var isSend = false;
      pc.onicecandidate = function (event) {
        console.log("步骤");
        if (event.candidate !== null) {
          if (isSend) return false;
          isSend = true;
          socket.send(
            JSON.stringify({
              event: "_ice_candidate",
              data: {
                candidate: event.candidate
              }
            })
          );
        }
      };
      // 如果检测到媒体流连接到本地，将其绑定到一个video标签上输出
      pc.onaddstream = function (event) {
        console.log("步骤二");
        document.getElementById("remoteVideo").srcObject = event.stream;
      };
      // 获取本地音频和视频流
      navigator.webkitGetUserMedia(
        {
          audio: true,
          video: true
        },
        function (stream) {
          //绑定本地媒体流到video标签用于输出
          //document.getElementById('localVideo').src = URL.createObjectURL(stream);
          document.getElementById("localVideo").srcObject = stream;
          //向PeerConnection中加入需要发送的流
          pc.addStream(stream);
          //如果是发起方则发送一个offer信令
          if (isCaller) {
            pc.createOffer(
              function (desc) {
                console.log("步骤一");
                pc.setLocalDescription(desc);
                socket.send(
                  JSON.stringify({
                    event: "_offer",
                    type: "offer",
                    data: {
                      sdp: desc
                    }
                  })
                );
              },
              function (error) {
                console.log("Failure callback: " + error);
              }
            );
          }
        },
        function (error) {
          //处理媒体流创建失败错误
          console.log("getUserMedia error: " + error);
        }
      );

      //处理到来的信令
      socket.onmessage = function (event) {
        console.log(event);
        var json = JSON.parse(event.data);
        //如果是一个ICE的候选，则将其加入到PeerConnection中，否则设定对方的session描述为传递过来的描述
        if (json.event === "_ice_candidate") {
          pc.addIceCandidate(new RTCIceCandidate(json.data.candidate));
        } else {
          pc.setRemoteDescription(new RTCSessionDescription(json.data.sdp));
          // 如果是一个offer，那么需要回复一个answer
          if (json.event === "_offer") {
            pc.createAnswer(
              function (desc) {
                pc.setLocalDescription(desc);
                socket.send(
                  JSON.stringify({
                    event: "_answer",
                    type: "answer",
                    data: {
                      sdp: desc
                    }
                  })
                );
              },
              function (error) {
                console.log("Failure callback: " + error);
              }
            );
          }
        }
      };
    </script>
  </body>
</html>
